<template>
  <Form ref="form" class="form" :model="formData" :rules="rules" @keydown.enter="loginBtnClick">
    <FormItem>
      <Select size="large" v-model="formData.accountType">
        <Option v-for="item in accountTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </FormItem>
    <FormItem prop="account">
      <Input placeholder="请输入登陆账号" autofocus size="large" v-model="formData.account"/>
    </FormItem>
    <FormItem prop="password">
      <Input size="large" placeholder="请输入登陆密码" type="password" password
             v-model="formData.password"/>
    </FormItem>
    <FormItem prop="verifyCode">
      <div class="verifyCodeFormItem">
        <Input size="large" placeholder="请输入验证码"
               class="verifyCodeInput"
               v-model="formData.verifyCode"/>
        <img alt="验证码" @click="refreshImageVerifyCode" class="verifyCodeImg" :src="verifyCode.verifyCode"/>
      </div>
    </FormItem>
    <FormItem>
      <Button :loading="loginBtnLoading" @click="loginBtnClick" class="loginBtn" size="large" type="primary">登陆
      </Button>
    </FormItem>

  </Form>
  <InitPassword ref="initPassword"/>
</template>

<script>
import {getCertification, getImageVerifyCode, login} from "@/api/auth/password";
import InitPassword from "./InitPassword.vue";
import AccountType from "@/api/auth/enums/AccountType";
import {Col, Image, Message} from "view-ui-plus";
import {RESPONSE_CODE_SUCCESS} from "@/constant/response";
import storage from "@/config/storage";
import XEUtils from "xe-utils";
import {LOGIN_RESULT_CODE} from "@/model/common/AuthEnums";

export default {
  name: "LoginForm",
  components: {Col, Image, InitPassword},
  data() {
    return {
      loginBtnLoading: false,
      rules: {
        account: [
          {required: true, message: '账号不能为空', trigger: 'blur'},
          {type: 'string', max: 255, message: '账号最多为255个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'},
          {type: 'string', max: 128, message: '密码最多为128个字符', trigger: 'blur'}
        ],
        verifyCode: [
          {required: true, message: '验证码不能为空', trigger: 'blur'},
          {type: 'string', max: 4, message: '密码最多为4个字符', trigger: 'blur'}
        ],
      },
      accountTypeList: [
        {
          label: '用户名',
          value: 0,
        },
        {
          label: '手机号',
          value: 1,
        },
        {
          label: '邮箱',
          value: 2,
        }
      ],
      formData: {
        account: '',
        password: '',
        accountType: AccountType.USER_NAME,
        verifyCode: ''
      },
      certification: {
        md5Salt: undefined,
      },
      verifyCode: {
        verifyCode: '',
        verifyCodeId: '',
      },
    }
  },
  created() {
    getCertification().then(res => {
      this.certification = res.data
    })
    this.refreshImageVerifyCode()
  },
  methods: {
    refreshImageVerifyCode() {
      this.verifyCode = '';
      getImageVerifyCode().then(res => {
        this.verifyCode = res.data
      })
    },
    loginBtnClick() {
      this.loginBtnLoading = true
      if (!this.certification.md5Salt) {
        location.reload();
      }
      this.$refs.form.validate((valid) => {
        if (!valid) {
          this.loginBtnLoading = false
          return
        }
        let reqData = XEUtils.clone(this.formData)
        reqData.verifyCodeId = this.verifyCode.verifyCodeId
        login(this.certification, reqData, {
          hideErrorMsg: true
        }).then(res => {
          // 账号密码未初始化,弹出初始化密码的输入框
          if (LOGIN_RESULT_CODE.ACCOUNT_NOT_INIT === res.code) {
            this.$refs.initPassword.show({
              account: this.formData.account,
              accountType: this.formData.accountType
            })
            this.loginBtnLoading = false
            return
          }
          if (LOGIN_RESULT_CODE.IMAGE_VERIFY_CODE_INVALID === res.code || LOGIN_RESULT_CODE.IMAGE_VERIFY_CODE_ERROR === res.code) {
            this.refreshImageVerifyCode()
            Message.error(res.msg)
            this.loginBtnLoading = false
            return;
          }
          if (res.code === RESPONSE_CODE_SUCCESS) {
            storage.setItem("accessToken", res.data.accessToken)
            Message.success("登陆成功")
            this.$router.push("/system/user/myInfo")
            this.loginBtnLoading = false
            return;
          }
          Message.error(res.msg)
          this.loginBtnLoading = false
        }, err => {
          this.loginBtnLoading = false
          Message.error(err.message)
        })
      })
    },
  }
}
</script>

<style lang="less" scoped>
.form {
  width: 450px;
  margin-left: auto;
  margin-right: auto;

  .loginBtn {
    width: 100%;
    letter-spacing: 10px;
  }

  .verifyCodeFormItem {
    display: flex;
    flex-direction: row;

    .verifyCodeInput {
      width: 315px;
    }

    .verifyCodeImg {
      margin-left: 10px;
    }
  }

}
</style>
